<template>
  <div>
    <Card shadow>
      <Row>
        <i-col span="4">
          <Button @click="createTagParams">添加一个标签</Button>
        </i-col>
        <i-col span="20">
          <p>动态路由，添加params</p>
        </i-col>
      </Row>
    </Card>
    <Card shadow style="margin-top: 10px;">
      <Row>
        <i-col span="4">
          <Button @click="createTagQuery">添加一个标签</Button>
        </i-col>
        <i-col span="20">
          <p>动态路由，添加query</p>
        </i-col>
      </Row>
    </Card>
    <Card shadow style="margin-top: 10px;">
      <Row>
        <i-col span="4">
          <Button @click="handleCloseTag">关闭工具方法页</Button>
        </i-col>
        <i-col span="20">
          <p>手动关闭页面</p>
        </i-col>
      </Row>
    </Card>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "tools_methods_page",
  methods: {
    ...mapMutations(["closeTag"]),
    createTagParams() {
      const id = parseInt(Math.random() * 100000);
      const route = {
        name: "params",
        params: {
          id
        },
        meta: {
          title: "动态路由"
        }
      };
      this.$router.push(route);
    },
    createTagQuery() {
      const id = parseInt(Math.random() * 100000);
      const route = {
        name: "query",
        query: {
          id
        },
        meta: {
          title: "动态参数"
        }
      };
      this.$router.push(route);
    },
    handleCloseTag() {
      this.closeTag({
        name: "tools_methods_page"
      });
    }
  }
};
</script>

<style>
</style>
